<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物商城</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- jQuery and JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

</head>

<style>
    .pictureStyle {
        height: 150px;
    }
</style>

<body>

<div>
    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" th:href="@{'/ziroom_portal/production/productionList'}">首页</a>

        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link active" th:if="${!#strings.isEmpty(session.userInfo)}" href="/ziroom_portal/user/userInfo">个人中心</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{'/ziroom_portal/cart/userCart'}">购物车</a>
            </li>
            </li>
            <li class="nav-item">
                <a class="nav-link active" th:if="${!#strings.isEmpty(session.userInfo)}" th:href="@{'/ziroom_portal/user/logout'}">退出</a>
            </li>
        </ul>

    </nav>
</div>
<p/>
<div class="container-fluid pictureStyle">
    <div class="row">
        <div id="carouselExampleIndicators" class="carousel slide offset-1 col-md-10" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <a><img src="http://139.224.186.148:10001/imgs/ziroom1.jpg" class="d-block w-100" style="height: 150px;width: 300px" alt="..."></a>
                </div>
                <div class="carousel-item">
                    <a><img src="http://139.224.186.148:10001/imgs/ziroom2.jpg" class="d-block w-100" style="height: 150px;width: 300px" alt="..."></a>
                </div>
                <div class="carousel-item">
                    <a><img src="http://139.224.186.148:10001/imgs/ziroom3.jpg" class="d-block w-100" style="height: 150px;width: 300px" alt="..."></a>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </button>
        </div>
    </div>
</div>
<p/>
<div class="container">
    <div class="row">
        <div class="col-md-4 offset-4">
            <form class="form-inline" action="/ziroom_portal/production/productionList" method="get">
                <div class="form-group mx-sm-3 mb-2">
                    <label for="inputPassword2" class="sr-only">商品信息:</label>
                    <input type="text" name="productionName" class="form-control" id="inputPassword2" placeholder="请输入要搜索的商品">
                </div>
                <button type="submit" class="btn btn-primary mb-2">搜索</button>
            </form>
        </div>
    </div>
</div>

<!--导航栏-->
<div>
    <ul class="nav nav-pills nav-fill">
        <li class="nav-item" th:each="c,categoryStat:${categoryList}">
            <a class="nav-link" th:href="@{'/ziroom_portal/production/productionList?categoryId='+${c.categoryId}}" th:if="${categoryStat.index + 1 == categoryList.size()}" th:text="${c.categoryName}" target="_blank"></a>
            <a class="nav-link border-right-1" th:href="@{'/ziroom_portal/production/productionList?categoryId='+${c.categoryId}}" th:if="${categoryStat.index + 1 != categoryList.size()}" th:text="${c.categoryName}" target="_blank"></a>
        </li>
    </ul>
</div>

<hr/>

<div class="container">
    <div class="row">
        <div class="col-md-3" th:each="p,productionStat:${productionList}">
            <div>
                <a th:href="@{'/ziroom_portal/production/productionDetail?productionId='+${p.productionId}}">
                    <img style="width: 220px;height: 220px" th:each="i,imageStat:${p.imageList}" th:if="${imageStat.index == 0}" th:src="${i.imageUrl}" th:alt="${p.productionIntroduction}" />
                </a>
            </div>
            <div>
                <span th:text="'$  '+${p.productionPrice}" style="font-size: 18px;color: red"></span>
            </div>
            <div>
                <a th:text="${p.productionName}" th:href="@{'/ziroom_portal/production/productionDetail?productionId='+${p.productionId}}"></a>
            </div>
        </div>
    </div>
</div>


</body>
</html>